<script>
import {defineComponent} from 'vue'
 
export default defineComponent({
    name: "childComment",
    props: {
        list: {
            type: Array,
            default: () => []
        },
        parentName: {
            type: String,
            default: ''
        },
        currentUserId: {
            type: String,
            default: ''
        }
    },
    methods: {
        replyComment(comment) {
            let data = {
                parentId: comment.id,
                rootParentId: comment.rootParentId,
                commentProductId: comment.productId
            }
            this.$emit('data', data);
            console.log('子组件向父组件传值', data)
        },

 
        handleMessageFromChild(data) {
            console.log('父组件接收到数据：' + data)
            console.log(data);
            /*    this.parentId = data.parentId
                this.rootParentId = data.rootParentId
                let data = {
                    parentId: comment.id,
                    rootParentId: comment.rootParentId
                }*/
            this.$emit('data', data);
            console.log('子组件向父组件传值', data)
        },
    }
})
</script>
 
<template>
 
    <div>
        <div v-for="(comment, index) in list" :key="index">
            <el-row>
                <el-col :span="22">
                    <el-row>
                        <!--  子评论用户昵称  -->
                        <el-col :span="2">
                            <span style="color: #a19e93"> {{ comment.user.name }}</span>
                        </el-col>
 
                        <!--  回复  -->
                        <el-col :span="2">
                            <span style="color: #a19e93">回复</span>
                        </el-col>
 
                        <!--  根评论用户昵称  -->
                        <el-col :span="2">
                            <span style="color: #a19e93">{{ parentName }}</span>
                        </el-col>
                        <!--  评论时间  -->
                        <el-col :span="16">
                            <span style="color: #99a9bf">{{ comment.createTime }}</span>
                        </el-col>
                        <!--  操作  -->
                        <el-col :span="1">
                            <el-link v-if="parseInt(currentUserId) !== comment.userId"
                                     @click="replyComment(comment)">回复
                            </el-link>
                        </el-col>
 
                    </el-row>
 
                    <el-row style="margin: 5px 0">
                        <!--  回复内容  -->
                        <span style="font-size: 15px">{{ comment.content }}</span>
                    </el-row>
                </el-col>
            </el-row>
            <!--   递归的核心     -->
            <childComment v-if="comment.child?.length" :list="comment.child" :parentName="comment.user.name"
                          :currentUserId="currentUserId" @data="handleMessageFromChild"/>
 
        </div>
    </div>
 
 
</template>
 
<style scoped>
 
</style>